<template>
  <ve-line
    :data="axisOption"
    :settings="chartSettings"
    ref="table"
    height="170px"
    :extend="chartExtend"
    :colors="colors"
  ></ve-line>
</template>
<script>
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
// import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    echartDataSku: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },

  data() {
    // :colors="colors"
    // this.colors = ['#03C8D5', '#40A9F5'];
    //
    // this.chartSettings = {
    //     yAxisType: ['0.[00]a', '0.[00]%'],
    //     axisSite: {
    //         right: []
    //         // '下单率'
    //     },
    //     yAxisName: ['数值轴', '比率轴']
    // },
    return {
      colors: ["#5470c6"],
      // chartOptions: {
      //     series: [{
      //         type: 'line',
      //         // data: [1, 2, 3, 4, 5],
      //         lineStyle: {
      //             color: '#36a3f7'
      //         }
      //     }]
      // },
      chartExtend: {
        grid: {
          bottom: "5%", //容器距离左边的距离，
        },
        legend: {
          show: false, //不显示x轴
        },
        xAxis: {
          show: false, //不显示x轴
        },
        yAxis: {
          // show: false, //不显示x轴
        },
        series: {
          smooth: false, //曲线改成折线
          // symbol: "none", //这线上圆点去掉
        },
      },
      chartSettings: {
        xAxis: {
          show: false, // 不显示x轴
        },
        yAxis: {
          show: false, // 不显示y轴
        },
        yAxisType: ["0.[00]a", "0.[00]%"],
        // axisLabel: {
        //     formatter: function (value) {
        //         return value / 10000 + 'w';
        //     }
        //     // }
        // },
        axisSite: {
          right: [],
          // '下单率'
        },
        // yAxisName: ['数值轴']
        // yAxisName: ["数值轴", "比率轴"],
      },
      axisOption: {
        // columns: ['日期', '访问用户', '下单用户', '下单率'],
        // rows: [
        //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        // ]
      },
    };
  },
  // computed: {
  //     axisOption() {
  //         return this.chartData
  //     }
  // },
  watch: {
    echartDataSku: {
      handler: function (newnew, oldold) {
        // console.log(JSON.stringify(newnew));
        this.axisOption = newnew;
        // newnew.columns.forEach((item) => {
        //   if (item.includes("率")) {
        //     this.chartSettings.axisSite.right.push(item);
        //     if (item.includes("连带率")) {
        //       this.chartSettings.axisSite.right = [];
        //       this.axisOption = newnew;
        //       // this.axisOption.columns = this.chartData.columns
        //     }
        //   } else {
        //     this.chartSettings.axisSite.right = [];
        //     this.axisOption = newnew;
        //     // this.axisOption.columns = this.chartData.columns
        //   }
        // });

        // this.axisOption.rows = this.chartData.rows
        // this.initChart()
        // this.axisOption = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.table.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.axisOption = this.echartDataSku;
    },
  },
};
</script>
